<template>
    <div class="page">
     
        <div class="container-wrap">
            <div class="sider">
            <div style="text-align: center;color:white">老姜后台管理系统</div>
            <el-scrollbar>
            <el-menu
                :uniqueOpened="true"
                default-active="1"
                background-color="#304156"
                text-color="#fff"
                active-text-color="#0080ff"
                >
                 <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <template #title>首页</template>
                </el-menu-item>
                <el-sub-menu index="2">
                    <template #title>
                    <i class="el-icon-document"></i>
                    <span>用户管理</span>
                    </template>
                    <el-menu-item index="2-1">用户数据</el-menu-item>
                    <el-menu-item index="2-2">新增账号</el-menu-item>         
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                    <i class="el-icon-document"></i>
                    <span>系统管理</span>
                    </template>
                    <el-menu-item index="3-1">字典管理</el-menu-item>
                    <el-menu-item index="3-2">参数设置</el-menu-item>         
                </el-sub-menu>
                </el-menu>
                </el-scrollbar>
            </div>
            <div class="container">
                   <div class="header">
                    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
                       <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                        </el-breadcrumb>
                   </div>
                     <div id="tags-view-container" class="tags-view-container"></div>
                <router-view ></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>
<style lang="scss" scoped>
    .page{
       position: relative;
       width: 100%;
       height: 100%;
    }
    .header {
        width: 100%;
        height: 50px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,21,41,.08);
        .hamburger-container {
            line-height: 46px;
            height: 100%;
            float: left;
            cursor: pointer;
            transition: background .3s;
            -webkit-tap-highlight-color:transparent;

            &:hover {
            background: rgba(0, 0, 0, .025)
            }
        }
    }
    .container-wrap{
        flex-direction: row;
        width: 100%;
    }
    .sider{
   
        width: 200px;
        height: 100%;
        background: #304156;
        position: fixed;
   
    }
    .container{
        margin-left: 200px;
        width: 100%;
        min-height: 100%;
        position: relative;
    }
    .tags-view-container {
        height: 34px;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #d8dce5;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
    }
</style>